<title>下拉菜单</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">下拉菜单</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">下拉菜单</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Dropdown Variations start -->
<section id="dropdown-variations">
	<div class="row match-height">
		<div class="col-xl-3 col-lg-6 col-md-6 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dropdown Variation</h4>
				</div>
				<div class="card-body">
					<div class="card-content">
						<p>Trigger dropdown menus below elements. This is default option.</p>
							<div class="btn-group mr-1 mb-1">
								<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									Dropdown
								</button>
								<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
									<a class="dropdown-item" href="#">Action</a>
									<a class="dropdown-item" href="#">Another action</a>
									<a class="dropdown-item" href="#">Something else here</a>
								</div>
							</div>
							<div class="btn-group mr-1 mb-1">
								<button type="button" class="btn btn-secondary">
									Split Dropdown
								</button>
								<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Action</a>
									<a class="dropdown-item" href="#">Another action</a>
									<a class="dropdown-item" href="#">Something else here</a>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dropup Variation</h4>
				</div>
				<div class="card-body">
					<div class="card-content">
						<p>Trigger dropdown menus above elements by adding <code> .dropup </code> to the parent element.</p>
						<div class="btn-group dropup mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true"
							 aria-expanded="false">
								Dropup
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group dropup mr-1 mb-1">
							<button type="button" class="btn btn-secondary">
								Split Dropup
							</button>
							<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dropright Variation</h4>
				</div>
				<div class="card-body">
					<div class="card-content">
						<p>Trigger dropdown menus at the right of the elements by adding <code> .dropright </code> to the parent element.</p>
						<div class="btn-group dropright mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true"
							 aria-expanded="false">
								Dropright
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group dropright mr-1 mb-1">
							<button type="button" class="btn btn-secondary">
								Split Dropright
							</button>
							<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dropleft Variation</h4>
				</div>
				<div class="card-body">
					<div class="card-content text-center">
						<p>Trigger dropdown menus at the left of the elements by adding <code> .dropleft </code> to the parent element.</p>
						<div class="btn-group dropleft mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true"
							 aria-expanded="false">
								Dropleft
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group mr-1 mb-1">
							<div class="btn-group dropleft" role="group">
								<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Action</a>
									<a class="dropdown-item" href="#">Another action</a>
									<a class="dropdown-item" href="#">Something else here</a>
								</div>
							</div>
							<button type="button" class="btn btn-secondary">
								Split Dropleft
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Variations end -->

<!-- Dropdown Active states start -->
<section id="dropdown-active-states">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdown Active states</h4>
			<p>Dropdown Buttons with <code>.active</code> class and theme color buttons.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">	Active states</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
										Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
										Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
										Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
										Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
										Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12 height-250">
								<div class="btn-group mr-1 mb-1 show">
									<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
										Action
									</button>
									<div class="dropdown-menu show">
										<button class="dropdown-item" type="button">Action</button>
										<button class="dropdown-item" type="button">Another action</button>
										<button class="dropdown-item active" type="button">Something else here</button>
										<div class="dropdown-divider"></div>
										<div class="dropdown-submenu">
											<button class="dropdown-item" type="button">More Options</button>
											<div class="dropdown-menu open-left" role="menu">
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
												<button class="dropdown-item" type="button">Submenu Item</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Active states end -->

<!-- Dropdown Sizes start -->
<section id="dropdown-sizes">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdowns Sizes</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Large Size</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use<code>.btn-lg</code> class to set large size dropdown.</p>
						<div class="btn-group mr-1 mb-1">
							<button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group mr-1 mb-1">
							<button type="button" class="btn btn-secondary btn-lg">
								Split Dropdown
							</button>
							<button type="button" class="btn btn-secondary btn-lg dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Size</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Default size dropdown.</p>
						<div class="btn-group mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group mr-1 mb-1">
							<button type="button" class="btn btn-secondary">
								Split Dropdown
							</button>
							<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Small Size</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>.btn-sm</code> class to set small size dropdown.</p>
						<div class="btn-group mr-1 mb-1">
							<button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownMenuButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group mr-1 mb-1">
								<button type="button" class="btn btn-secondary btn-sm">
									Split Dropdown
								</button>
								<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<span class="sr-only">Toggle Dropdown</span>
								</button>
								<div class="dropdown-menu">
									<a class="dropdown-item" href="#">Action</a>
									<a class="dropdown-item" href="#">Another action</a>
									<a class="dropdown-item" href="#">Something else here</a>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Sizes end -->

<!-- Dropdown Options start -->
<section id="dropdown-options">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdowns Options</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Data Offset</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>data-offset</code> to change the location of the dropdown.</p>
						<div class="btn-group mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
								Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton7">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group mr-1 mb-1">
							<button type="button" class="btn btn-secondary">
								Split Dropdown
							</button>
							<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Data Reference</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use <code>data-reference</code> to change the location of the dropdown.</p>
						<div class="btn-group mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
								Dropdown
							</button>
							<div class="dropdown-menu" aria-labelledby="dropdownMenuButton8">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group mr-1 mb-1">
							<button type="button" class="btn btn-secondary">
								Split Dropdown
							</button>
							<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xl-4 col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Menu right alignment</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
						<div class="btn-group mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
								Dropdown
							</button>
							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton9">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
						<div class="btn-group mr-1 mb-1">
							<button type="button" class="btn btn-secondary">
								Split Dropdown
							</button>
							<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
								<span class="sr-only">Toggle Dropdown</span>
							</button>
							<div class="dropdown-menu dropdown-menu-right">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Options end -->

<!-- Dropdown with Headers start -->
<section id="dropdown-with-headers">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdown Menu content</h4>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Basic Header</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Add a header to label sections of actions in any dropdown menu.</p>
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header">Header 1</h6>
								<button class="dropdown-item" type="button">Action</button>
								<button class="dropdown-item" type="button">Another action</button>
								<h6 class="dropdown-header">Header 2</h6>
								<button class="dropdown-item" type="button">Something else here</button>
								<button class="dropdown-item" type="button">Another Link</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Dividers</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Separate groups of related menu items with a divider.</p>
						<div class="dropdown show">
							<div class="dropdown-menu show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<h6 class="dropdown-header">Header 1</h6>
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<h6 class="dropdown-header">Header 2</h6>
								<a class="dropdown-item" href="#">Something else here</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Text</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.</p>
						<div class="dropdown show">
							<div class="dropdown-menu p-2 show" style="display: block; position: static; width: 100%; margin-top: 0; float: none;">
								<p>
									Some example text that's free-flowing within the dropdown menu.
								</p>
								<p>
									Some example text that's free-flowing within the dropdown menu.
								</p>
								<p>
									Some example text that's free-flowing within the dropdown menu.
								</p>
								<p class="mb-0">
									And this is more example text.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown with Headers end -->

<!-- Dropdown Menu forms start -->
<section id="dropdown-menu-forms">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dropdown Menu Forms</h4>
			<p>Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Login form with options</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group dropup mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropup
							</button>
							<div class="dropdown-menu">
								<form class="p-1" style="width: 275px;">
									<div class="form-group">
										<label for="exampleDropdownFormEmail1">Email address</label>
										<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
									</div>
									<div class="form-group">
										<label for="exampleDropdownFormPassword1">Password</label>
										<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
									</div>
									<div class="form-check pb-1">
										<input type="checkbox" class="form-check-input" id="dropdownCheck">
										<label class="form-check-label" for="dropdownCheck">
											Remember me
										</label>
									</div>
									<button type="submit" class="btn btn-primary">Sign in</button>
								</form>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">New around here? Sign up</a>
								<a class="dropdown-item" href="#">Forgot password?</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Simple Login</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group dropup mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropup
							</button>
							<div class="dropdown-menu">
								<form class="p-1" style="width: 275px;">
									<div class="form-group">
										<label for="exampleDropdownFormEmail2">Email address</label>
										<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
									</div>
									<div class="form-group">
										<label for="exampleDropdownFormPassword2">Password</label>
										<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
									</div>
									<div class="form-check pb-1">
										<input type="checkbox" class="form-check-input" id="dropdownCheck2">
										<label class="form-check-label" for="dropdownCheck2">
											Remember me
										</label>
									</div>
									<button type="submit" class="btn btn-success">Sign in</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-6 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Sign Up Form</h4>
				</div>
				<div class="card-content">
					<div class="card-body text-center">
						<div class="btn-group dropup mr-1 mb-1">
							<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								Dropup
							</button>
							<div class="dropdown-menu">
								<form class="p-1" style="width: 275px;">
									<div class="form-group">
										<label for="fname">First Name</label>
										<input type="text" class="form-control" id="fname" placeholder="First name">
									</div>
									<div class="form-group">
										<label for="lname">Last Name</label>
										<input type="text" class="form-control" id="lname" placeholder="Last Name">
									</div>
									<div class="form-group">
											<label for="emailId">Email</label>
											<input type="email" class="form-control" id="emailId" placeholder="email@example.com">
										</div>
									<div class="form-check pb-1">
										<input type="checkbox" class="form-check-input" id="dropdownCheck3">
										<label class="form-check-label" for="dropdownCheck3">
											Remember me
										</label>
									</div>
									<button type="submit" class="btn btn-danger">Sign Up</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dropdown Menu forms end -->
</div>

<script type="text/javascript">
	
</script>